<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时炸弹交互效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #f0f0f0;
            position: relative;
            overflow: hidden;
        }
        
        .status {
            margin-bottom: 20px;
            font-family: Arial, sans-serif;
            font-size: 18px;
            color: #333;
        }
        
        .bomb-container {
            position: relative;
            width: 600px;
            height: 350px;
            display: flex;

        }
        
        .bomb-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
            z-index: 10;
            position: relative;
        }
        
        .timer {
            position: absolute;
            top: 48%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ff0000;
            font-family: 'Courier New', monospace;
            font-size: 36px;
            font-weight: bold;
            text-shadow: 0 0 8px rgba(255, 0, 0, 0.8);
            z-index: 20;
        }
        
        /* 导线点击区域 */
        .red-wire {
            position: absolute;
            left: 100px;
            top: 120px;
            width: 130px;
            height: 90px;
            cursor: pointer;
            z-index: 30;
        }
        
        .yellow-wire {
            position: absolute;
            right: 180px;
            top: 80px;
            width: 150px;
            height: 100px;
            cursor: pointer;
            z-index: 30;
        }
        
        /* 效果图片容器 */
        .effect-image {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.8);
        }
        
        .effect-image img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
        }
        
        .restart-btn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="status"></div>
    
    <div class="bomb-container">
        <img src="https://s11.ax1x.com/2023/10/27/piZ7xCF.jpg" 
             alt="定时炸弹" class="bomb-image">
        
        <div class="timer" id="timer">7:55</div>
        
        <!-- 红线点击区域 -->
        <div class="red-wire" id="redWire"></div>
        
        <!-- 黄线点击区域 -->
        <div class="yellow-wire" id="yellowWire"></div>
    </div>
    
    <!-- 爆炸效果图片（第一张图） -->
    <div class="effect-image" id="explosionEffect">
        <img src="https://tukuimg.bdstatic.com/scrop/114b521c51b64e95c1eb6f7404fc4367.gif" 
             alt="爆炸效果">
    </div>
    
    <!-- 停止效果图片（第三张图） -->
    <div class="effect-image" id="stopEffect">
        <img src="https://img.soogif.com/dpndKfwpXb5QwS170f53BxmfhDHWF9gP.gif_s400x0" 
             alt="停止效果">
    </div>

    <script>
        // 获取DOM元素
        let timerElement = document.getElementById('timer');
        let redWire = document.getElementById('redWire');
        let yellowWire = document.getElementById('yellowWire');
        let explosionEffect = document.getElementById('explosionEffect');
        let stopEffect = document.getElementById('stopEffect');
        let statusElement = document.querySelector('.status');
        let restartBtn = document.getElementById('restartBtn');
        let bombContainer = document.querySelector('.bomb-container');
        
        // 倒计时变量
        let countdownInterval;
        let minutes = 7;
        let seconds = 55;
        let isActive = true;
        
        // 更新倒计时显示
        function updateTimer() {
            // 格式化时间显示
            timerElement.textContent = `${minutes.toString().padStart(1, '0')}:${seconds.toString().padStart(2, '0')}`;
            // 减少时间
            if (seconds === 0) {
                minutes--;
                seconds = 59;
            } else {
                seconds--;
            }
        }
        
        // 触发爆炸效果（显示第一张图）
        function triggerExplosion() {
            if (!isActive) return;
                                                                      
            isActive = false;
            clearInterval(countdownInterval);
            explosionEffect.style.display = 'flex';
            bombContainer.style.display = 'none';
            restartBtn.style.display = 'block';
        }
        
        // 触发停止效果（显示第三张图）
        function triggerStop() {
            if (!isActive) return;
            
            isActive = false;
            clearInterval(countdownInterval);
            stopEffect.style.display = 'flex';
            bombContainer.style.display = 'none';
            restartBtn.style.display = 'block';
        }
        
        // 重新开始
        function restart() {
            isActive = true;
            seconds = 5;
            timerElement.textContent = '7:55';
            explosionEffect.style.display = 'none';
            stopEffect.style.display = 'none';
            bombContainer.style.display = 'flex';
            restartBtn.style.display = 'none';
            countdownInterval = setInterval(updateTimer, 1000);
        }
        
        // 开始倒计时
        countdownInterval = setInterval(updateTimer, 1000);
        
        // 红线点击事件 - 停止并显示第三张图
        redWire.addEventListener('click', triggerStop);
        
        // 黄线点击事件 - 爆炸并显示第一张图
        yellowWire.addEventListener('click', triggerExplosion);
        
    </script>
</body>
</html>